import Vue from 'vue';
import App from './App.vue';
import router from './router';
import './plugins/element.js';
// 使用事项：双注册；向vue注册vuex，vue实例中也要注册store
// 不同组件对应的路由页面之间的通信，vuex可以实现
import Vuex from 'vuex';
Vue.use(Vuex);

Vue.config.productionTip = false;
//  store挂载在vue实例中
var store = new Vuex.Store({
  state: {
    count: 0,
    showChange: true
  },
  mutations: {
    addCount(state, par) {
      state.count = state.count + par;
    },
    del(state, par) {
      state.count = state.count - par;
      if (state.count < 0) {
        state.count = 0;
      }
    }
  },
  getters: {
    getCount(state) {
      return state.count;
    }
  },
  /* actions类似mutations，但是又有不同：
  1.actions提交的是mutations
  2.actions负责同vue component的交互行为，包括同步/异步操作，可以有多个同名方法，按照顺序依次执行。（mutations只能进行
  同步操作，且包含的方法名必须全局唯一）
  */
  actions: {
    // getAddCount(context, prop) {
    //   // 提交的是mutations
    //   context.commit('addCount', prop);
    // },
    getDel(context, prop) {
      // 提交的是mutations
      context.commit('del', prop);
    }
  }
});
new Vue({
  router,
  render: h => h(App),
  store // Vuex要注册到vue中，同时var store=new Vuex.store();也要注册到Vue实例中
}).$mount('#app');
/*
vue-cli3项目构建过程
1.根据预设模板生成项目
2.根目录下配置vue.config.js设置自定义端口和项目启动后自动打开页面
3.如果使用element ui 库，只需在图形界面-插件-安装vue-cli-plugin-element即可，此时会自动生成babel.config>js配置
*/
